//纵向项目 
<template>
  <div class="module_">
    <div class="mb8">
      <div class="flex-align-center">
        <back/><h3 class="tx-c flex-1 " style="marginRight:73px">{{portraitName}}</h3>
      </div>
      <div class="mt8">
        <search @clearSearch='clearSearch' :status='false' :self="true">
          <el-form label-width='80px' inline autocomplete="off"  :model="pageparm" class="search_box">
            <el-form-item label="成员姓名">
              <inputSearch  ref="search_e" placeholder="请输入成员姓名搜索" @onChange='searchChane($event,"employee_id")'  />
            </el-form-item> 
            <el-form-item label="科室" v-if="adminShow">
              <inputSearch ref="search_d" type='departments' @onChange='searchChane($event,"departments_id")'  />
            </el-form-item>
          </el-form>
          <template slot="footer">
            <el-button class="mr8" size="medium" type="primary" @click="handle(null,{},3)">新增项目成员</el-button>
            <exportExcel :options="{projects_id}" :apiFn='Apiproject_members'  :name='portraitName' />
          </template>
        </search>
      </div>
    </div>
    <el-table
      :data="tableData"
      class="flex-1"
      height="100%" size="medium" 
      border 
      highlight-current-row
      v-loading="tableLoading"
      stripe
      @sort-change="tableSortChange">  
      <el-table-column
        align="center"
        v-for="(item,i) in headerList"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        :fixed="i === 0 ? true: false"
        show-overflow-tooltip
        sortable="custom">
        <template slot-scope="scope">
          <template v-if="item.prop === 'departments_id'">
            {{ scope.row.department?scope.row.department.name:'' }}
          </template>
          <template v-else-if="item.prop === 'employee_name'">
           {{ scope.row.member?scope.row.member.name:''}}
          </template>
          <template v-else>
           {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-tooltip  effect="dark" content="修改信息" placement="bottom-end">
            <el-button size="small"  @click="handle(scope.$index, scope.row,2)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip  effect="dark" content="删除" placement="bottom-end">
            <el-button size="small" type="danger" @click="deleteUser(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <el-dialog v-if="editFormVisible" :visible.sync="editFormVisible" width="400px" @close='dialogClose'
    :close-on-click-modal='false'
    :close-on-press-escape='false'>
      <h2 slot="title" class="tx-c">{{dialogTitle}}</h2>
      <el-form autocomplete="off"  label-width="100px" :model="editForm" class="form_flex">
        <el-form-item
          v-for="(v, i) in editHeaderList"
          :key="'list'+ i"
          :label="v.label"
          :class="v.required ? 'tip' : ''">
          <inputSearch  v-if="v.prop === 'employee_name'" ref="e_Search" :disabledSearch="disabledSearch" :info='true' @onChange='nameChange' :middleList='middleList' />
          <el-select size="medium" v-else-if="v.prop === 'type'" v-model="editForm[v.prop]" clearable   placeholder="请选择负责人类型" >
            <el-option
                v-for="item in membersType"
                :key="'type' + item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-input
            v-else
            size="medium"
            :type="v.type"
            autosize
            clearable
            v-model="editForm[v.prop]"
            @mousewheel.native.prevent
            :placeholder="'请输入' + v.label"/>
        </el-form-item>
      </el-form> 
      <div slot="footer" class="flex-justify-bcenter">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>
    
    <!-- 审核 -->
    <!-- <examine ref="examine" @submit='examineSubmit' :item='examine_item' />    -->

  </div>
</template>

<script>

import {
    Apiproject_members,
    Apiproject_membersAdd,
    Apiproject_membersPut,
    Apiproject_membersDel,
} from '@/api'
import {reviewStatus,projectLevel,membersType} from "@/assets/js"
import { debounce,adminShow } from "@/utils/index";
import {isPhone,isEmail,isIDCard} from '@/utils/test'
import {headerList} from '../js/members'
export default {
  name: 'project_portrait_members',
  computed:{
      editHeaderList(){
        return  headerList.filter(item => item.prop !== 'departments_id') 
      }
  },
  data(){
    return{
      Apiproject_members,
      adminShow: adminShow(),
      reviewStatus,
      membersType,

      tableData:[], 
      editFormVisible: false, 
      editForm: {},  //修改或者查看详情

      projects_id: this.$route.query.id,
      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null, 
        sort_order: 'desc' ,
        projects_id: this.$route.query.id,
      },
      tableLoading: false,

      btnLoading: false,

      headerList,
      rules:['employee_name'],

      departmentsId:null,
      examine_id: null,  //审核id
      examine_item:{
        view: false
      },

      middleList:[],
      portraitName: sessionStorage.getItem('portraitName'),
      dialogTitle: '',
      disabledSearch: true,
    }
  },
  mounted(){
    this.getList()
  },
  methods:{
    //审核
    // examineSubmit(options){
    //   options.id = this.examine_id
    //   ApiprojectsCheck(options,options.id).then(res => {
    //     this.getList()
    //   }).catch(()=>{
    //     this.$message.error('服务器错误，请重新提交');   
    //   })
    // },
    // examine_btns(item,i){
    //   this.examine_id = item.id
    //   if(i > 1){
    //     this.examine_item.review_status = item.review.review_status
    //     this.examine_item.review_comment = item.review.review_comment
    //     this.examine_item.view = true
    //   }else{
    //     this.examine_item.view = false
    //   }
    //   this.$refs.examine.examineShow = true

    // },
    echo(i,arr){
      let label
      for (const item of arr) {
        if(item.value === i){
          label = item.label
          break;
        }
      }
      return label
    },
    tableSortChange(column){
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      this.getList()
    },
    //搜索
    clearSearch(){
      this.pageparm =  {
        page: 1,
        perPage: this.pageparm.perPage,
        total: this.pageparm.total,
        sort_str: this.pageparm.sort_str, 
        sort_order: this.pageparm.sort_order ,
        projects_id: this.$route.query.id,
      },
      this.$refs.search_e.clear()
      if(this.adminShow) this.$refs.search_d.clear()
      this.getList()
    },
    searchChane(i,val){
      this.pageparm[val] = i
      this.pageparm.page = 1
      this.getList()
    },
    //分页
    callFather(pageparm){
      this.pageparm.page = pageparm.page
      this.pageparm.perPage = pageparm.perPage
      this.getList()
    },
    getList(){
      this.tableLoading = true
      Apiproject_members(this.pageparm).then(({data,page}) => {
        this.tableData = data || []
        this.pageparm.total = page.total
        this.tableLoading = false
      }).catch(()=>{
        this.tableLoading = false
      })
    },
    handle(index,value,i){
      this.editForm = {...value}
      this.editFormVisible = true
      if(i == 2){
        this.dialogTitle = '修改项目成员'
        this.disabledSearch = true
        delete this.editForm.review
        this.$nextTick(()=>{
          this.middleList = [{employees_id: value.employee_id,employee:{name:value.employee_name}}]
        })
      }else{
        this.dialogTitle = '新增项目成员'
        this.disabledSearch = false
      }
    },
    departmentsChange(id){
      this.editForm.departments_id = id
    },
    nameChange({id,name}){
      this.editForm.employee_id = id
      this.editForm.employee_name = name
    },
    dialogClose(){
      this.$refs.e_Search[0].clear()
    },
    deleteUser(index,value){
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          Apiproject_membersDel(value.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          }).finally(()=>{
            loading.close()
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    submit : debounce(function(){   //提交  修改或新增
      const options = {...this.editForm}
      for (const key of this.rules) {
        if(!options[key] && options[key] !== 0){
          this.$message({
            type: 'error',
            message: '必填信息请填写完整！'
          });
          return
        }
      }
      // isPhone,isEmail,isIDCard
      if(options.card_no && !isIDCard(options.card_no)){
        this.$message.error('请输入正确身份证号');
        return
      }
      if(options.phone && !isPhone(options.phone)){
        this.$message.error('请输入正确手机号');
        return
      }
      if(options.email && !isEmail(options.email)){
        this.$message.error('请输入正确邮箱');
        return
      }
      options.projects_id = this.projects_id
      this.btnLoading = true
      if(options.id){   //有ID就是修改
        Apiproject_membersPut(options,options.id).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.editFormVisible = false
          this.getList()
        }).catch(()=>{
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
        }).finally(()=>{
            this.btnLoading = false
        });
      }else{
        Apiproject_membersAdd(options).then(res => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.editFormVisible = false
          this.getList()
        }).catch(()=>{
          this.$message({
            type: 'error',
            message: '添加失败!'
          });
        }).finally(()=>{
            this.btnLoading = false
        });
      }
    },800,true),
  },

}
</script>